<template>
  <a-space direction="horizontal" align="center" size="100" />
  <a-form
    ref="formRef"
    layout="inline"
    name="dynamic_form_nest_item"
    :model="data.queryObj"
    labelAlign="right"
    :label-col="lableStyle"
    :wrapper-col="inputStyle"
  >
    <a-form-item label="平台" name="platformId" style="margin-bottom: 5px" required>
      <JDictSelectTag v-model:value="data.queryObj.platformId" compType="CompTypeEnum.RadioButton" dictCode="yyc_business_platform,name,id" />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button @click="doQuery">查询</a-button>
        <a-button @click="doExport">导出</a-button>
        <a-button @click="doExportTemplate">模板</a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="doUpload">导入</j-upload-button>
        <a-button type="primary" @click="showCreate">创建</a-button>
      </a-space>
    </a-form-item>
  </a-form>
  <a-table
    class="ant-table-striped"
    size="small"
    :columns="data.columns"
    :data-source="data.record"
    :pagination="data.pagination"
    :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    @change="handleTableChange"
  />
  <DailyReportFrom v-model:visible="data.createVisible" @onOk="onCreated" />
</template>

<script lang="ts" name="yyc.dailyreport.list" setup>
  import { onMounted, reactive, ref } from 'vue';
  import { JDictSelectTag } from '/@/components/Form';
  import DailyReportFrom from './components/DailyReportForm.vue';
  import { FormInstance } from 'ant-design-vue';
  import { list, importUpload } from './PlatformDaily.api';
  import { list as platformList } from '/@/views/yyc/setting/businessplatform/BusinessPlatform.api';
  import { useMethods } from '/@/hooks/system/useMethods';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { notification } from 'ant-design-vue';

  const { createMessage } = useMessage();

  const formRef = ref<FormInstance>();
  const lableStyle = { style: { width: '100px' } };
  const inputStyle = { style: { width: '200px' } };
  const { handleExportXls } = useMethods();

  let data = reactive({
    platFormsItems: [],
    createVisible: false,
    queryObj: {
      platformId: null,
    },
    record: [],
    pagination: {
      total: 0,
      current: 1,
      pageSize: 10,
    },
    errorMsg: '',
    columns: [{}],
  });

  function doQuery() {
    formRef.value?.validate().then((value) => {
      list({ ...value, pageNo: data.pagination.current, pageSize: data.pagination.pageSize }).then((result) => {
        data.record = result.records.records;
        buildColums(result);
        data.pagination = {
          total: result.records.total,
          current: result.records.current,
          pageSize: result.records.size,
        };
      });
    });
  }

  function handleTableChange(pag: { pageSize: number; current: number; total: number }) {
    data.pagination = pag;
    doQuery();
  }

  function doExport() {
    formRef.value?.validate().then((value) => {
      handleExportXls('导出的文件', '/yyc.dailyreport/platformDaily/export', value);
    });
  }

  function doExportTemplate() {
    formRef.value?.validate().then((value) => {
      handleExportXls('模板', '/yyc.dailyreport/platformDaily/exportTemplate', value);
    });
  }

  async function doUpload(data) {
    console.log(data);
    await defHttp.uploadFile(
      { url: importUpload },
      { file: data.file },
      {
        success: (res) => {
          if (res.code == 200) {
            createMessage.success(res.message);
          } else {
            notification['error']({
              message: '导入失败',
              description: res.message,
              placement: 'bottomRight',
              duration: 10,
            });
          }
        },
      }
    );
  }

  onMounted(() => {
    platformList({}).then((result) => {
      data.queryObj.platformId = result.records[0].id;
      doQuery();
    });
  });

  /**
   * 根据结果集构建表头
   * @param report
   */
  function buildColums(report) {
    let dailyItems = report.dailyItems;
    data.columns = [];
    data.columns.push({
      title: '平台',
      dataIndex: '平台',
      width: '3%',
    });
    data.columns.push({
      title: '店铺',
      dataIndex: '店铺',
      width: '4%',
    });
    data.columns.push({
      title: '日期',
      dataIndex: 'datatime',
      width: '6%',
    });

    dailyItems.forEach((item) => {
      data.columns.push({
        title: item.name,
        dataIndex: item.name,
        customRender: (record) => {
          return record.text ?? '/';
        },
      });
    });
  }

  function onCreated() {
    doQuery();
  }

  function showCreate() {
    data.createVisible = true;
  }
</script>

<style scoped>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
